<template>
<div class="article-manage" style="margin-left:5px">
        <el-card shadow="always" :body-style="{ padding: '20px',display: 'flex','justify-content': 'end' }">
            <el-row :gutter="20">
                <el-col :span="24" style="display: flex;align-items: end;justify-content: end;line-height: 40px;height: 40px;">
                   <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/index/comment' }">评论管理</el-breadcrumb-item>
                   </el-breadcrumb>
                </el-col>
                <el-col :span="12" style="display: flex;align-items: end;justify-content: end;line-height: 40px;height: 40px;">
                    <div class="grid-content bg-purple">
                        <el-button @click="addComment" type="text"  icon="el-icon-plus" style="font-size:20px"></el-button>
                        <el-button type="text"  icon="el-icon-refresh-right" style="font-size:20px"></el-button>
                    </div>
                </el-col>
                    <el-col :span="12" style="display: flex;align-items: end;justify-content: flex-end;line-height: 40px;height: 40px;">
                    <div class="grid-content bg-purple">
                        <el-input placeholder="请输入内容" clearable v-model="input2">
                            <template slot="append"><i class="el-icon-search" style="color:#409EFF"></i></template>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="24" class="tables">
                    <div class="grid-content bg-purple">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column fixed  prop="date"  label="日期" width="150"></el-table-column>
                            <el-table-column prop="name"     label="姓名" width="120"></el-table-column>
                            <el-table-column prop="province" label="省份" width="120"></el-table-column>
                            <el-table-column prop="city"     label="市区" width="120"></el-table-column>
                            <el-table-column prop="address"  label="地址" width="300"></el-table-column>
                            <el-table-column prop="zip"      label="邮编" width="120"></el-table-column>
                            <el-table-column fixed="right"   label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button @click="editComment(scope.row)" type="text" icon="el-icon-edit" size="small" style="font-size:20px"></el-button>
                                <el-button @click="deleteCommentById(scope.row.name)" type="text" size="small" icon="el-icon-delete" style="font-size:20px"></el-button>
                            </template>
                            </el-table-column>
                        </el-table>
                            
                    </div>
                </el-col>
                <el-col :span="24" style="display: flex;justify-content: end;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>  
        
        <Dialog :dialogVisible.sync="addDialogVisible" titleName="添加评论" width="50%">
          <Commnet_add></Commnet_add>    
        </Dialog>      
        <Dialog :dialogVisible.sync="editDislogVisible" titleName="编辑评论" width="50%">
          <Comment_edit></Comment_edit>    
        </Dialog>     
    </div>

</template>
<script>
import Dialog from '../../components/dialog/Dialog'
import Comment_add from './Comment_add'
import Comment_edit from './Comment_edit'
export default{
    name:'Comment',
    data(){
        return{
             addDialogVisible:false,
             editDislogVisible:false,
             input2:'',
             currentPage4: 4,
             tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
                }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: 200333
                }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: 200333
                }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: 200333
                }]

        }
    },
    components:{
        Dialog,
        Comment_add,
        Comment_edit
    },
    methods:{
        
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        addComment:function(){
            this.addDialogVisible=true;
            this.editDislogVisible=false;
        },
        deleteCommentById:function(id){
             var _this=this;
            _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$message({
                    type: 'success',
                    message: '删除成功'
                }); 
            }).catch(() => {
                _this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });       
        },
        editComment:function(){
            this.addDialogVisible=false;
            this.editDislogVisible=true;
        }
    }
}
</script>
<style>

.el-table__header tr,.el-table__header th {
    padding: 0;
    height: 40px;
    line-height: 40px;
    text-align: left;
}
.el-table__body tr,
.el-table__body td {
    padding: 0;
    height: 40px;
    line-height: 40px;
    text-align: left;
}
.tables{
    margin-top: 5px;
    /* border:1px solid red; */
}
.el-input{
    width:300px;
}
.article-manage{
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

</style>